<html>
<head>
<style id="s">
  ol {
    counter-reset: section;
    list-style-type: none;
  }
  li:before {
    counter-increment: section;
    content: counters(section, ".") " ";
  }
</style>

</head>
<body>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

<script>
s = document.getElementById("s");
t = s.textContent;

function foo()
{
  document.body.offsetHeight;
  s.textContent = "ol { color: #ddd}";
  document.body.offsetHeight;
  s.textContent = t;
}
foo();
</script>

</body>
</html>
